<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>查看流程图</title>
    <link rel="stylesheet" href="/static/build/layui.css" th:href="@{/static/layui/css/layui.css}" media="all">
</head>
<body>

<input type="hidden" name="processDefinitionId" class="processDefinitionId" />

<!-- 1.获取到规则流程图 -->
<img style="position: absolute;top: 0px;left: 0px;" src='#' th:src="@{/deploy/showImg(processDefinitionId=${processDefinitionId})}" class="image" />
<!-- 2.根据当前活动的坐标，动态绘制DIV-->
<div class="draw"></div>

<script src="/static/build/layui.js" th:src="@{/static/layui/layui.js}"></script>
<script th:inline="javascript">
    layui.use(['layer'],function() {
        var $ = layui.jquery;

        $(function(){
            setTimeout(function () {

                var content = "position: absolute;border:1px solid red;top:"+[[${coordinate.y-4}]]+"px;left:"+[[${coordinate.x-2}]]+"px;width:"+[[${coordinate.width+2}]]+"px;height:"+[[${coordinate.height+5}]]+"px;";

                $(".draw").attr("style", content);

            }, 50);
        });
    });
</script>
</body>
</html>